<template>
  <div class="reading-progress">
    <van-nav-bar title="阅读进度" left-arrow @click-left="goBack" />
    
    <van-tabs v-model:active="activeTab">
      <van-tab title="在读">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            v-for="progress in readingList"
            :key="progress.id"
            :title="progress.bookTitle"
            :desc="progress.author"
            :thumb="progress.coverUrl || 'https://img.yzcdn.cn/vant/ipad.jpeg'"
            @click="goToBookDetail(progress.bookId)"
          >
            <template #tags>
              <van-tag plain type="primary">在读</van-tag>
            </template>
            <template #footer>
              <div class="progress-info">
                <van-progress
                  :percentage="progress.percent"
                  stroke-width="6"
                  :show-pivot="false"
                />
                <div class="page-info">{{ progress.currentPage }} / {{ progress.totalPages }} 页</div>
              </div>
            </template>
          </van-card>
        </van-list>
      </van-tab>
      
      <van-tab title="已读">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            v-for="progress in finishedList"
            :key="progress.id"
            :title="progress.bookTitle"
            :desc="progress.author"
            :thumb="progress.coverUrl || 'https://img.yzcdn.cn/vant/ipad.jpeg'"
            @click="goToBookDetail(progress.bookId)"
          >
            <template #tags>
              <van-tag plain type="success">已读</van-tag>
            </template>
            <template #footer>
              <div class="finish-date">完成于 {{ progress.finishDate }}</div>
            </template>
          </van-card>
        </van-list>
      </van-tab>
    </van-tabs>
    
    <van-tabbar v-model="tabbarActive" @change="onChangeTab">
      <van-tabbar-item icon="home-o" @click="goHome">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="goToSearch">搜索</van-tabbar-item>
      <van-tabbar-item icon="add-o" @click="goToAddBook">添加</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="goToProfile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

export default {
  name: 'ReadingProgress',
  setup() {
    const router = useRouter()
    const activeTab = ref(0)
    const tabbarActive = ref(2)
    const loading = ref(false)
    const finished = ref(false)
    
    // 模拟在读列表
    const readingList = ref([
      { id: 1, bookId: 1, bookTitle: 'Vue.js设计与实现', author: '霍春阳', coverUrl: '', percent: 65, currentPage: 260, totalPages: 400 },
      { id: 2, bookId: 2, bookTitle: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas', coverUrl: '', percent: 30, currentPage: 150, totalPages: 500 }
    ])
    
    // 模拟已读列表
    const finishedList = ref([
      { id: 3, bookId: 3, bookTitle: '重构：改善既有代码的设计', author: 'Martin Fowler', coverUrl: '', finishDate: '2023-05-15' },
      { id: 4, bookId: 4, bookTitle: '代码大全', author: 'Steve McConnell', coverUrl: '', finishDate: '2023-04-20' }
    ])
    
    const goBack = () => {
      router.go(-1)
    }
    
    const goHome = () => {
      router.push('/')
    }
    
    const goToSearch = () => {
      router.push('/search')
    }
    
    const goToAddBook = () => {
      router.push('/scan')
    }
    
    const goToProfile = () => {
      router.push('/profile')
    }
    
    const goToBookDetail = (bookId) => {
      router.push(`/book/${bookId}`)
    }
    
    const onLoad = () => {
      // 模拟加载更多数据
      setTimeout(() => {
        loading.value = false
      }, 1000)
    }
    
    const onChangeTab = (index) => {
      // tab切换处理
    }
    
    return {
      activeTab,
      tabbarActive,
      loading,
      finished,
      readingList,
      finishedList,
      goBack,
      goHome,
      goToSearch,
      goToAddBook,
      goToProfile,
      goToBookDetail,
      onLoad,
      onChangeTab
    }
  }
}
</script>

<style scoped>
.progress-info {
  width: 100%;
}

.page-info {
  text-align: right;
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.finish-date {
  font-size: 12px;
  color: #666;
}
</style>